<template>
  <div v-loading="indexLoading" class="customerDetails">
    <el-row>
      <el-col :span="24">
        <div class="title">
          <span>客户详情</span>
          <el-button class="backGo" type="info" @click="goBack">返回</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="avatar-details">
      <div class="top">
        <div class="left" style="border: 0">
          <el-avatar :size="50" :src="message.avatar || initPic"></el-avatar>
          <div class="infos" style="text-align: left">
            <el-input v-if="isName" v-model="message.name" @blur="reviseName"></el-input>
            <p class="infoName" v-else>
              {{ message.name }}
              <i class="el-icon-edit" @click="isName = true"></i>
            </p>
            <p class="infoNum">
              客户号: {{ message.sid }}
              <span v-if="message.wecomAddState">{{ addStateList[message.wecomAddState] }}</span>
            </p>
          </div>
        </div>
        <div class="right" style="border: 0">
          <el-button class="goPortrait" @click="customerPortrait">客户画像</el-button>
          <el-button class="goPortrait" @click="customerPortraitGroup">客户分组画像</el-button>
        </div>
      </div>
      <el-row class="bottom">
        <el-col :span="6">客户来源：<span>{{ message.customerWay }}</span></el-col>
        <el-col :span="6">客户归属：<span class="agent">{{ message.follower }}</span></el-col>
        <el-col :span="6">微信昵称：<span>{{ message.wechatNickname }}</span>
          <svg-icon v-if="message.wechatNickname" :data-clipboard-text="message.wechatNickname" class="wxNickname" icon-class="copy" @click="copy"></svg-icon>
        </el-col>
        <el-col :span="6">
          微信号：<span @click="getfindNo('wechatNo')">{{ message.wechatNo }}</span>
          <svg-icon v-if="message.wechatNo" :data-clipboard-text="message.wechatNo" class="wxNickname" icon-class="copy" @click="copy"></svg-icon>
        </el-col>
      </el-row>
    </div>
    <div class="customer-journey">
      <div class="headline"><span></span>客户旅程</div>
      <ul>
        <li v-for="(item, i) in journeyList" :key="item" :class="i <= message.followState && message.followState ? 'arrow_active' : 'arrow_simple'">{{ item }}</li>
      </ul>
    </div>
    <div class="main">
      <div class="left">
        <div class="basic-info">
          <div class="title_btn">
            <div class="headline">
              <span></span>基本信息
            </div>
            <div v-if="isRolesFlag">
              <el-button v-if="operateFlag == 'DETAIL'" type="primary" size="mini" @click="editOperateFn">修改信息</el-button>
              <el-button v-if="operateFlag == 'EDIT'" type="primary" size="mini" v-loading="saveLoading" @click="editSave">保存</el-button>
              <el-button v-if="operateFlag == 'EDIT'" type="info" size="mini" plain :disabled="saveLoading" @click="editCancel">取消</el-button>
            </div>
          </div>
          <BasicInfo ref="basicInfo" :id="id" :operateFlag="operateFlag"/>
        </div>
        <div class="modu2">
          <div class="title_btn">
            <div class="headline"><span></span>标签信息</div>
            <el-button class="addTagBtn" icon="el-icon-plus" type="info" @click="addTagVisible = true,isMultiD = false">添加标签
            </el-button>
          </div>
          <div class="essInfo">
            <el-tag v-for="(item, i) in tagInfoList" :key="i" :class="tagColorList[i % 5]" size="medium">
              <template v-if="item">
                <span v-if="item.groupName">{{ item.groupName + ':' }}</span>
                <span>{{ item.tagName || item.tag }}</span>
              </template>
            </el-tag>
          </div>
        </div>
        <div v-if="isRolesFlag" class="similarCustomer">
          <div class="title_btn">
            <div class="headline"><span></span>相似客户</div>
          </div>
          <div class="essInfo">
            <div class="table_title">
              <div class="table_option">
                <el-checkbox-group v-model="checkedList" @change="changeChecked">
                  <el-checkbox label="姓名"></el-checkbox>
                  <el-checkbox label="联系电话"></el-checkbox>
                  <el-checkbox label="证件号码"></el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="table_btn">
                <el-button type="info" @click="mergePopup('1')">合并轨迹</el-button>
                <el-button type="primary" @click="mergePopup('0')">合并</el-button>
              </div>
            </div>
            <el-table v-loading="tableLoading" :data="tableData" class="similarTable" fit>
              <el-table-column v-for="(item, i) in tableList" :key="i" :label="item.label" :prop="item.prop" align="center" :min-width="item.minWidth"></el-table-column>
              <el-table-column align="center" fixed="right" label="操作" prop="createTime" width="60">
                <template slot-scope="scope">
                  <el-button size="small" type="text" @click="handleClick(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <NormalPagination :currentPage="pageNum" :pageSize="pageSize" :total="total" :pageSizeList="[5, 10, 30, 50]" @handleSizeChange="handleSizeChangeA" @handleCurrentChange="handleCurrentChangeA"></NormalPagination>
          </div>
        </div>
        <div class="similarCustomer">
          <div class="title_btn">
            <div class="headline"><span></span>关系网</div>
          </div>
          <div class="essInfo">
            <el-tabs v-model="networkIndex" @tab-click="handleSelectMenu">
              <el-tab-pane label="分享" name="0"></el-tab-pane>
              <el-tab-pane label="亲友" name="1"></el-tab-pane>
            </el-tabs>
            <el-table :data="networkData" fit>
              <el-table-column align="center" label="客户号" prop="sid" min-width="180"></el-table-column>
              <el-table-column align="center" label="姓名" prop="name"></el-table-column>
              <el-table-column align="center" label="客户关系" prop="customerRole"></el-table-column>
              <el-table-column align="center" label="联系电话" prop="desPhone">
                <template slot-scope="scope">
                  <span @click="getCusFindNo(scope.row, 'desPhone')">{{ scope.row.desPhone }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="证件类型" prop="idType"></el-table-column>
              <el-table-column align="center" label="证件号码" prop="desIdCard" min-width="180">
                <template slot-scope="scope">
                  <span @click="getCusFindNo(scope.row, 'desIdCard')">{{ scope.row.desIdCard }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="跟进阶段" prop="followState"></el-table-column>
              <el-table-column align="center" label="跟进人" prop="follower"></el-table-column>
              <el-table-column align="center" fixed="right" label="操作" prop="createTime" width="60">
                <template slot-scope="scope">
                  <el-button size="small" type="text" @click="handleClick(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <NormalPagination :currentPage="networkPageNum" :pageSize="networkPageSize" :total="networkTotal" :pageSizeList="[5, 10, 30, 50]" @handleSizeChange="handleSizeChangeB" @handleCurrentChange="handleCurrentChangeB"></NormalPagination>
          </div>
        </div>
        <div class="similarCustomer">
          <div class="title_btn">
            <div class="headline"><span></span>触达的任务</div>
          </div>
          <div class="essInfo">
            <SopTask></SopTask>
          </div>
        </div>
      </div>
      <div class="right">
        <NavbarVue :followStateList="followStateList" :msgCustomerState="message.followState" :msgFollowId="message.followId" :msgFollower="message.follower" :msgRealPhone="realPhone" :msgUnionid="message.unionid"></NavbarVue>
      </div>
    </div>
    <!-- 添加标签 -->
    <el-dialog :visible.sync="addTagVisible" class="addTag" title="添加标签" width="30%">
      <el-autocomplete v-model.trim="tagGroup" :fetch-suggestions="querySearch" @blur="groupNameBlur"
        :trigger-on-focus="false" class="inline-input" placeholder="请输入标签组名" style="margin-left: 20px;width:70%"></el-autocomplete>
      <br/>
      <el-input v-model.trim="addTagValue" autocomplete="off" placeholder="请输入标签" style="width: 70%;margin-top:10px"></el-input>
      <br/>
          <el-radio-group v-model="isMulti" :disabled="isMultiD" style="margin-left: 20px;margin-top:10px">
            <el-radio :label="0">单选</el-radio>
            <el-radio :label="1">多选</el-radio>
          </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTagVisible = false">取 消</el-button>
        <el-button type="primary" @click="customerTagAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 合并弹窗 -->
    <el-dialog title="客户合并" width="820px" :visible.sync="mergePopupVisible">
      <MergePopup ref="mergePopup" :sid="id" :visible.sync="mergePopupVisible" :id.sync="mergePopupId"
      v-if="mergePopupVisible" @getDetails="getDetails"></MergePopup>
    </el-dialog>
  </div>
</template>

<script>
import { getLabelSelectList } from "@/api/label";
import { validateIdentityCode, validateNum, validatePhone } from '@/utils/validate'
import NavbarVue from './components/NavBar'
import MergePopup from './components/MergePopup'
import SopTask from './components/SopTask';
import BasicInfo from "./components/BasicInfo";
import Clipboard from 'clipboard'
import initPic from '@/assets/cutomer/defaultAvatar.png'
import {
  cusWeTagAdd,
  findCusFamily,
  findCusShare,
  findCusSimilar,
  findCusWeTag,
  findNo,
  getFindCusDetail,
  updateCusDetail
} from '@/api/customer/customerManage'

export default {
  name: 'customerDetails',
  components: {
    NavbarVue,
    MergePopup,
    SopTask,
    BasicInfo
  },
  data() {
    return {
      id: this.$route.query.sid,
      customerType: this.$route.query.customerType,
      results: [],
      isMulti:1,
      isMultiD: false,
      indexLoading: false,
      initPic: initPic,
      addTagVisible: false,
      journeyList: [ '客户获取', '初步意向', '意向', '报价', '投保', '二次成交', '多次成交', '流失' ],
      tagInfoList: [],
      tagGroup: '',
      addTagValue: '',
      tagColorList: [ 'tagGreen', 'tagBlue', 'tagPink', 'tagYellow', 'tagPurple' ],
      checkedList: [],
      idTypeOpt: {},
      tableData: [],
      tableLoading: false,
      tableList: [
        { prop: 'sid', label: '客户号', minWidth: '180' },
        { prop: 'customerId', label: '关联客户号', minWidth: '180' },
        { prop: 'name', label: '姓名', minWidth: '120' },
        { prop: 'phone', label: '联系电话', minWidth: '120' },
        { prop: 'idType', label: '证件类型', minWidth: '120' },
        { prop: 'idCard', label: '证件号码', minWidth: '180' },
        { prop: 'followState', label: '跟进阶段', minWidth: '120' },
        { prop: 'follower', label: '跟进人', minWidth: '120' }
      ],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      // 关系网
      networkIndex: '0',
      networkData: [],
      networkTotal: 0,
      networkPageNum: 1,
      networkPageSize: 5,
      message: {},
      isName: false,
      followStateList: [],
      // 真实
      realPhone: null,
      realWeChatNo: null,
      addStateList: { '0': '待添加', '1': '已添加', '2': '已删除' },
      mergePopupVisible: false,
      mergePopupId: '0',
      // 客户基本信息模块
      saveLoading: false,
      operateFlag: 'DETAIL',
      oldBasicForm: {}
    }
  },
  created() {
    this.getDicts('id_type').then(res => {
      if (res.code == 200) {
        res.data.forEach(item => {
          this.idTypeOpt[item.dictValue] =  item.dictLabel;
        });
      }
    })
    this.getFindRealNo()
    this.getDetails()
  },
  computed: {
    isRolesFlag() {
      let roles = this.$store.state.user.roles
      let manFlag = roles.indexOf('manager') < 0 ? false : true
      let sysFlag = roles.indexOf('sys_admin') < 0 ? false : true
      let adminFlag = roles.indexOf('admin') < 0 ? false : true
      let myCusFlag = this.customerType ? true : false
      let flag = manFlag || sysFlag || myCusFlag || adminFlag
      return flag
    }
  },
  methods: {
    handleSizeChangeA(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.changeChecked()
    },
    handleCurrentChangeA(val) {
      this.pageNum = val;
      this.changeChecked()
    },
    handleSizeChangeB(val) {
      this.networkPageNum = 1;
      this.networkPageSize = val;
      this.handleSelectMenu()
    },
    handleCurrentChangeB(val) {
      this.networkPageNum = val;
      this.handleSelectMenu()
    },
    // 返回
    goBack() {
      this.$router.back()
    },
    getDetails(id) {
      this.indexLoading = true
      // 合并轨迹详情传值sid
      let params = { sid: id ? id : this.id }
      getFindCusDetail(params).then((res) => {
        if (res.code === 200) {
          this.message = res.data
          this.changeChecked()
          this.handleSelectMenu()
          this.indexLoading = false
        }
      }).catch(() => {
        console.log('error submit!!')
        this.indexLoading = false
      })
      this.getFindCusWeTag()
    },
    // 查询标签
    getFindCusWeTag() {
      let params = { sid: this.id }
      findCusWeTag(params).then((res) => {
        if (res.code === 200) {
          this.tagInfoList = res.data || []
        }
      })
    },
    customerTagAdd() {
      let reg  =/^[^，,]*$/
      if(!reg.test(this.addTagValue)) return this.$message.error('请不要输入逗号')
      let params = {
        sid: this.id,
        userId: this.message.sysUserId,
        externalUserid: this.message.externalUserid,
        weTagGroup: {
          groupName: this.tagGroup,
          groupTagType: '1',
          isMulti: this.isMulti,
          weTags: [],
          customerPhone: this.message.phone
        }
      }
      params.weTagGroup.weTags.push({ name: this.addTagValue })
      cusWeTagAdd(params)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success('添加成功')
            this.tagGroup = ''
            this.addTagValue = ''
            this.addTagVisible = false
            this.isMulti = 1
            this.getDetails()
          }
        })
        .catch(() => {
          console.log('error submit!!')
        })
    },
    // 详情
    handleClick(rows) {
      this.getDetails(rows.sid)
      document.querySelector('.customerDetails').scrollTop = 0
    },
    // 点击复制
    copy() {
      let clipboard = new Clipboard('.wxNickname')
      clipboard.on('success', (e) => {
        this.$message.success('复制成功')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        this.$message.error('该浏览器不支持复制')
        // 释放内存
        clipboard.destroy()
      })
    },
    // 客户画像
    customerPortrait() {
      this.$router.push({
        name: 'Portrait',
        query: { sid: this.id }
      })
    },
    // 客户分组画像
    customerPortraitGroup() {
      this.$router.push({
        name: 'CustomerPortrait',
        query: { sid: this.id }
      })
    },
    // 修改信息
    editOperateFn() {
      this.operateFlag = 'EDIT';
      this.oldBasicForm = JSON.parse(JSON.stringify(this.$refs.basicInfo.basicForm));
    },
    editSave() {
      let params = {
        sid: this.id,
        ...this.$refs.basicInfo.basicForm
      }
      let obj = this.$refs.basicInfo.showTextEdit;
      for (let key in obj) {
        if (!obj[key]) params[key] = this.$refs.basicInfo.realObj[key];
      }
      // 证件号码判断
      if (params.idCard && !validateIdentityCode(params.idCard)) {
        this.$message.error('请正确填写证件号！')
        return false;
      }
      // 数字判断
      let flag = false, temp = null;
      this.$refs.basicInfo.formList.forEach(item => {
        if (item.inputType == 'NUMBER' && params[item.fieldCode] && !validateNum(params[item.fieldCode])) {
          flag = true;
          temp = item.fieldName;
        }
        if (item.inputType == 'PHONE' && params[item.fieldCode] && !validatePhone(params[item.fieldCode])) {
          flag = true;
          temp = item.fieldName;
        }
      });
      if (flag) {
        this.$message.error(`请正确填写${temp}`);
        return false;
      }
      this.saveLoading = true;
      updateCusDetail(params).then((res) => {
        if (res.code === 200) {
          this.$message.success('修改成功')
          this.operateFlag = 'DETAIL';
          this.$refs.basicInfo.getBasicInfoDataFn();
          this.$refs.basicInfo.getFindNo();
        }
        this.saveLoading = false;
      }).catch((res) => {
        this.$message.error(res.msg)
        this.saveLoading = false;
      })
    },
    editCancel() {
      this.operateFlag = 'DETAIL';
      this.$refs.basicInfo.resetForm(this.oldBasicForm);
    },
    // 修改名字
    reviseName() {
      const params = {
        sid: this.id,
        name: this.message.name,
        externalUserid: this.message.externalUserid || '',
        phone: '',
      }
      updateCusDetail(params)
        .then((res) => {
          if (res.code === 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.getDetails()
            this.isName = false
          }
        })
        .catch(() => {
          console.log('error submit!!')
          this.isName = false
        })
    },
    // 合并轨迹
    mergePopup(value) {
      this.mergePopupId = value
      this.mergePopupVisible = true
    },
    // 获取相似客户
    getFindCusSimilar(params) {
      this.tableLoading = true
      findCusSimilar(params).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows || []
          this.tableData.forEach(element => {
            element.followState = this.selectDictLabel(this.followStateList, element.followState)
            element.idType = this.idTypeOpt[element.idType]
          })
          this.total = res.total || 0
          this.tableLoading = false
        }
      }).catch(() => {
        console.log('error submit!!')
        this.tableLoading = false
      })
    },
    async changeChecked() {
      const params = {
        sid: this.message.sid,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: '0',
        phone: '0',
        idCard: '0'
      }
      this.checkedList.forEach((item) => {
        if (item == '姓名') params['name'] = '1';
        if (item == '联系电话') params['phone'] = '1';
        if (item == '证件号码') params['idCard'] = '1';
      })
      this.getFindCusSimilar(params)
    },
    async getfindNo(infoType) {
      if (!this.isRolesFlag) return
      if (infoType === 'wechatNo') this.message.wechatNo = this.realWeChatNo
    },
    async getFindRealNo() {
      if (!this.isRolesFlag) return
      const params = {
        sid: this.id,
        customerType: '1'
      }
      await findNo(params).then((res) => {
        if (res.code === 200) {
          this.realWeChatNo = res.data.wechatNo
          this.realPhone = res.data.phone
        }
      })
    },
    //关系网亲友
    handleSelectMenu() {
      if (this.networkIndex === '0') {
        this.getFindCusShare()
      } else {
        this.getFindCusFamily()
      }
    },
    getCusFindNo(rows, type) {
      if (!this.isRolesFlag) return
      if (type === 'desPhone') {
        this.networkData.forEach(item => {
          if (item.sid === rows.sid) {
            item.desPhone = rows.phone
          }
        })
      } else if (type === 'desIdCard') {
        this.networkData.forEach(item => {
          if (item.sid === rows.sid) {
            item.desIdCard = rows.idCard
          }
        })
      }
    },
    //获取关系网分享
    getFindCusShare() {
      // if (this.message.externalUserid) {
      //   const params = {
      //     externalUserid: this.message.externalUserid
      //   }
      //   findCusShare(params).then((res) => {
      //     if (res.code === 200) {
      //       this.networkData = res.rows || []
      //       this.networkData.forEach(element => {
      //         element.followState = this.selectDictLabel(this.followStateList, element.followState)
      //         element.idType = this.idTypeOpt(element.idType)
      //       })
      //       this.networkTotal = res.total || 0
      //     }
      //   }).catch(() => {
      //     console.log('error')
      //   })
      // } else {
      //   this.networkData = []
      //   this.networkTotal = 0
      // }
      this.networkData = [{
        sid: '1783679465660416002',
        name: '徐海娟',
        customerRole: '同事',
        desPhone: '13778529727',
        followState: '初步意向',
        follower: 'liuyue',
      }]
      this.networkTotal = 1
    },
    //获取关系网亲友
    getFindCusFamily() {
      if (this.message.customerId) {
        const params = {
          customerId: this.message.customerId
        }
        findCusFamily(params).then((res) => {
          if (res.code === 200) {
            this.networkData = res.rows || []
            this.networkData.forEach(element => {
              element.followState = this.selectDictLabel(this.followStateList, element.followState)
              element.idType = this.idTypeOpt(element.idType)
            })
            this.networkTotal = res.total || 0
          }
        }).catch(() => {
          console.log('error')
        })
      } else {
        this.networkData = []
        this.networkTotal = 0
      }
    },
    // 搜索框
    querySearch(queryString, cb) {
      if (this.isMultiD) this.isMultiD = false
      this.results = []
      if (queryString) {
        getLabelSelectList(queryString).then(res => {
          if (res.code === 200) {
            this.results = res.data
          }
        }).finally(() => cb(this.results))
      }
    },
    // 失去焦点，判断输入的值是否与获取的 results 有重复的
    groupNameBlur() {
      setTimeout(() => {
        let i = 0
        this.results.forEach(item => {
          if (i == 0 && item.value == this.tagGroup){
            this.isMulti = item.isMulti || 0
            this.isMultiD = true;
            i++;
          }
        })
      }, 200)
    },
  }
}
</script>
<style lang="scss" scoped>
@import "../../../styles/element-ui.scss";

.customerDetails {
  .title {
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 20px;
    font-weight: 500;
    color: #2a2a2a;
    line-height: 28px;
  }

  .avatar-details {
    background: #fff;
    margin-top: 20px;
    padding: 20px 20px;
    .top {
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;

        .infos {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding-left: 10px;

          .infoName {
            font-size: 16px;

            i {
              margin-left: 8px;
            }
          }

          .infoNum {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            line-height: 20px;
          }

          span {
            background: #eeeeee;
            font-size: 11px;
            font-weight: 400;
            line-height: 16px;
            padding: 2px 5px;
            margin-left: 10px;
          }
        }
      }
    }
    .bottom {
      margin-top: 19px;
      padding: 15px 18px;
      background: #f6f6f6;
      font-size: 14px;
      color: #999999;
      line-height: 20px;
      span {
        color: #2a2a2a;
      }
      .agent {
        color: #082aff;
      }
      .svg-icon {
        margin-left: 5px;
      }
    }
  }

  .headline {
    // 标题样式
    font-size: 16px;
    font-weight: bold;
    color: #393b44;
    line-height: 21px;
    padding-top: 19px;
    display: flex;
    align-items: center;

    span {
      width: 3px;
      height: 21px;
      background: #082aff;
      margin-right: 21px;
    }
  }

  // 客户旅程
  .customer-journey {
    background: #fff;
    margin-top: 16px;
    ul {
      display: flex;
      padding: 20px 30px;
      justify-content: space-between;
      li {
        flex: 1;
        background-size: 100% 100%;
        background-position: 0 0;
        text-align: center;
        line-height: 36px;
        font-size: 14px;
        font-weight: 500;
      }
      .arrow_active {
        background-image: url(../../../assets/cutomer/arrow.png);
        color: #ffffff;
      }
      .arrow_simple {
        background-image: url(../../../assets/cutomer/arrow1.png);
        color: #082aff;
      }
    }
  }

  // 信息主体
  .main {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;

    .left {
      width: 66%;
      .basic-info {
        .basic-info-phone {
          display: flex;
          align-items: center;
          font-weight: normal;
          margin-left: 30px;
          .el-button {
            font-size: 12px;
          }
        }
        background: #fff;
        ::v-deep {
          .el-descriptions-item__container {
            align-items: center;
            margin-right: 20px;
          }
        }
      }

      .modu2 {
        background: #fff;
        margin: 16px 0;

        .essInfo {
          padding-right: 100px;
        }

        .el-tag {
          font-size: 13px;
          margin-right: 12px;
          margin-bottom: 11px;

          span {
            margin-left: 5px;
          }
        }

        .tagGreen {
          color: #25ce2c !important;
          background: #e8f8e8 !important;
          border-color: #e8f8e8 !important;
        }

        .tagBlue {
          color: #3e85f6 !important;
          background: #e9effc !important;
          border-color: #e9effc !important;
        }

        .tagPink {
          color: #ff5252 !important;
          background: #ffedec !important;
          border-color: #ffedec !important;
        }

        .tagYellow {
          color: #e38424 !important;
          background: #fff3e7 !important;
          border-color: #fff3e7 !important;
        }

        .tagPurple {
          color: #977aee !important;
          background: #f1ecff !important;
          border-color: #f1ecff !important;
        }
      }

      .similarCustomer {
        background: #fff;
        margin-bottom: 20px;
        padding-bottom: 14px;

        .table_title {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }

    .right {
      width: 33%;
      background: #fff;
      margin-bottom: 20px;
    }
  }

  .title_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 12px 0;

    .headline {
      padding: 0 0;
    }
  }

  .essInfo {
    padding: 0 18px;
  }

  .addTag {
    .el-input {
      margin: 5px 20px;
    }
  }
}

.backGo {
  background: #E7E7E7 !important;
}

.goPortrait {
  // font-size: 14px;
  // font-weight: 400;
  color: #082aff !important;
  border-color: #FAD9D1 !important;
  // line-height: 20px;
}

.addTagBtn {
  color: #fff !important;
  background: #082aff !important;

  :hover {
    color: #fff !important;
  }
}

.similarTable {
  margin-top: 20px;
}

.el-icon-question {
  font-size: 16px;
  cursor: pointer;
}

</style>
